<template>
    <div class="login">
        <div class="loginBox">
            <h3>e店邦O2O平台</h3>
            <div>
                <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
                    class="demo-ruleForm">
                    <el-form-item prop="username">
                        <el-input v-model="ruleForm.username" autocomplete="off">
                            <template #prefix>
                                <el-icon class="el-input__icon">
                                    <UserFilled />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="ruleForm.password" type="password" autocomplete="off">
                            <template #prefix>
                                <el-icon class="el-input__icon">
                                    <Lock />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="code">
                        <div class="vcCode">
                            <el-input v-model.number="ruleForm.code">
                                <template #prefix>
                                    <el-icon class="el-input__icon">
                                        <Unlock />
                                    </el-icon>
                                </template>
                            </el-input>
                            <img :src="'data:image/gif;base64,' + imgUrl" alt="">
                        </div>

                    </el-form-item>
                    <el-form-item>
                        <el-checkbox label="记住密码" size="large" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { loginAPI, vcCodeAPI } from "./api"
import { reactive, ref } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
import { Unlock, UserFilled, Lock } from '@element-plus/icons-vue'
import { useRouter } from "vue-router"
const router = useRouter()
const ruleForm = reactive({
    username: 'XinZ',
    password: '123456',
    code: '',
    uuid: ""
})
const imgUrl = ref<string>('')
vcCodeAPI().then((res) => {
    if (res.code === 200) {
        console.log(res.uuid);
        ruleForm.uuid = res.uuid
        imgUrl.value = res.img
    }
})
const ruleFormRef = ref<FormInstance>()

const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    } else {
        callback()
    }
}



const rules = reactive({
    username: [{ required: true, message: "请输入用户名", trigger: 'blur' }],
    password: [{ validator: validatePass, trigger: 'blur' }],
    code: [{ required: true, message: "请输入验证码", trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            loginAPI(ruleForm).then(res => {
                if (res.code === 200) {
                    localStorage.setItem('token', 'Bearer ' + res.token)
                    ElMessage.success("登录成功")
                    router.push('/')
                }
            })
        } else {
            console.log('error submit!')
            return false
        }
    })
}
</script>

<style lang="less" scoped>
.login {
    width: 100%;
    height: 100%;
    background-image: url("@/assets/images/loginBg.jpg");
    position: relative;
    text-align: center;

    .loginBox {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: 350px;
        height: 340px;
        padding: 25px 25px 5px 25px;
        background-color: #fff;
        border-radius: 5px;

        &>h3 {
            margin-bottom: 30px;
        }

        :deep(.el-form-item__content) {
            margin-left: 0 !important;

            .vcCode {
                display: flex;

                &>img {
                    height: 38px;
                    margin-left: 20px;
                }
            }
        }

        :deep(.el-button) {
            width: 100%;
            height: 36px;

        }

        :deep(.el-input__inner) {
            height: 36px;
        }

        .cvCode {
            display: flex;
        }
    }
}
</style>